import React, { useState } from "react";
import Headers from '../../compoents/Header'
import type { RadioChangeEvent } from 'antd';
import { Radio, Space, Tabs,Button, Form, Input, Tag  } from 'antd';
import { InfoCircleOutlined } from '@ant-design/icons';
type TabPosition = 'left' | 'right' | 'top' | 'bottom';
const Index:React.FC=()=>{
       const text = '系统管理'
       const [tabPosition, setTabPosition] = useState<TabPosition>('left');
        const changeTabPosition = (e: RadioChangeEvent) => {
            setTabPosition(e.target.value);
        };
         const [form] = Form.useForm();
    return(
        <div className="container">
             <Headers text={text}></Headers>
             <div className="content">
                <div className="left">
                       <Space style={{ marginBottom: 24 }}>
                    <Radio.Group value={tabPosition} onChange={changeTabPosition}>
                    </Radio.Group>
                </Space>
                <Tabs
                    tabPosition={tabPosition}
                    items={new Array(3).fill(null).map((_, i) => {
                    const id = String(i + 1);
                    return {
                        label: `Tab ${id}`,
                        key: id,
                        children: `Content of Tab ${id}`,
                    };
                    })}
                />    
                </div>
                {/* <div className="right">
                      <Form
                        form={form}
                        layout="vertical"
                        // initialValues={{ requiredMarkValue: requiredMark }}
                        // onValuesChange={onRequiredTypeChange}
                        // requiredMark={requiredMark === 'customize' ? customizeRequiredMark : requiredMark}
                        >
                        <Form.Item label="系统地址" required>
                            <Input placeholder="input placeholder" />
                        </Form.Item>
                        <Form.Item label="后台地址">
                            <Input placeholder="input placeholder" />
                        </Form.Item>
                        <Form.Item label='系统标题'>
                            <Input placeholder="input placeholder" />
                        </Form.Item>
                        </Form>
                </div> */}
             </div> 
        </div>
    )
}
export default Index